<template>
   <div>
     <div style="display: flex;justify-content: space-between">
       <div style="text-align: left;color: black;padding: 1.25rem;font-size: 0.875rem;font-weight: bold">热门分类</div>
       <div style="display:flex;justify-content: space-around;width:4.375rem ;padding: 1.25rem;">
         <img src="" alt="" style="width: 0.75rem;height: 0.75rem;margin-top: 0.1875rem">
          <span style="font-size:0.75rem;font-weight: bold;color: #848689;">排行榜</span>
         <img src="" alt="" style="width: 0.75rem;height: 0.75rem;margin-top:0.125rem;">
       </div>
     </div>

     <div class="box">
       <div v-for="(item,index) in Detail" :key="index" class="list">
       <img :src="item.src" alt="">
         <br>
       <span style="font-size: 0.875rem">{{item.text}}</span>
     </div>
     </div>

   </div>
</template>

<script>
export default {
  name: "Hot",
  data:()=>({
    Detail:[]
  }),
  created() {

  },
  mounted(){
    let that=this;
    let url='http://localhost:5000';
    this.$http.get(url+'/data/Classify.json')
        .then(function (response) {

          that.Detail=response.data.Detial.map(i=>({

            text:i['text'],
            src:url+i['src'],

          }));

        })
        .catch(function (error) {
          console.log(error);
        })
        .then(function () {
          // always executed
        });
  },
  methods:{




  }
}
</script>

<style scoped>
.list{
  width: 5.25rem;
  height: 6.75rem;
}
.list img{
  width: 4.375rem;
  height: 4.375rem;
}
.box{
  display: flex;
  flex-wrap: wrap;
  padding: 0.625rem;
}
</style>